import React, { memo } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Button, Input, Select } from "antd";

export default function CameraSetting() {
  type FieldType = {
    cameraName?: string;
    type?: string;
    url?: string;
  };

  const options = [
    {
      value: "RTSP",
      label: "RTSP",
    },
    {
      value: "FLV",
      label: "FLV",
    },
    {
      value: "WEBRTC",
      label: "WEBRTC",
    },
  ];

  const [form] = Form.useForm();

  const onGenderChange = (value: string) => {
    switch (value) {
      case "RTSP":
        break;
      case "FLV":
        break;
      case "WEBRTC":
        break;
      default:
    }
  };

  const onFinish = (values: any) => {
    console.log(values);
  };

  const onReset = () => {
    form.resetFields();
  };
  return (
    <>
      <p>摄像头配置</p>
      {[1, 2, 3, 4, 5].map((item) => {
        return (
          <Form
            name="basic"
            style={{ maxWidth: "none" }}
            layout="inline"
            autoComplete="off"
            form={form}
            onFinish={onFinish}
            className="grid grid-cols-6 gap-4 my-8"
          >
            <Form.Item<FieldType> name="cameraName">
              <Input placeholder="请输入名称" />
            </Form.Item>

            <Form.Item name="type">
              <Select
                options={options}
                placeholder="请选择类型"
                onChange={onGenderChange}
                allowClear
              ></Select>
            </Form.Item>

            <Form.Item<FieldType> name="url" className="col-span-3">
              <Input placeholder="请输入媒体流地址" />
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
              <Button type="primary" onClick={onReset} className="ml-2">
                删除
              </Button>
            </Form.Item>
          </Form>
        );
      })}
    </>
  );
}
